
 <!-- 自定义 菲菲聊天机器人-- 青云客 http://api.qingyunke.com/-->
<template>
  <div>
    <ul class="msgs" ref="box">
      <template v-for="(item, index) in list">
        <!-- 左边：别人问 -->
        <li class="msg-l" v-if="!item.isME" :key="index">
          <div class="msg-box">
            <div class="title">{{ item.name }}</div>
            <p>{{ item.content }}</p>
          </div>
          <small>{{ item.time }}</small>
        </li>
        <!-- 右边：我回复 -->
        <li class="msg-r" v-else :key="index">
          <div class="msg-box">
            <div class="title">{{ item.name }}</div>
            <p>{{ item.content }}</p>
          </div>
          <small>{{ item.time }}</small>
        </li>
      </template>
    </ul>
    <div class="send-msg">
      <textarea @keyup.enter="sendMsg" v-model="val"></textarea>
      <i class="el-icon-position" @click="sendMsg"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showstate: false,
  },

  data() {
    return {
      val: "",
      list: [
        
      ],

      imgsrc: "",
    };
  },

  methods: {
    sendMsg() {
      if (!this.val) {
        alert("发送内容不能为空~");
        return false;
      }

      let obj1 = {
        name: "me",
        content: this.val,
        time: this.getNowTime("YYYY-mm-dd HH:MM", new Date()),
        isME: 1,
      };
      this.list.push(obj1);
      this.scrollToBottom();

     
     this.$get(
        "robot/" + this.val,
        {},
        (data) => {
          console.log(data);

          let obj = {
            name: "小菲",
            content: data.data,
            time: this.getNowTime("YYYY-mm-dd HH:MM", new Date()),
            isME: 0,
          };
          this.list.push(obj);
          this.scrollToBottom();
        },
        (error) => {
          this.$message.error(error.msg);
        }
      );


      this.val = "";

    },
    getNowTime(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },

    scrollToBottom() {
      var div = this.$refs.box;
      this.$nextTick(() => {
        div.scrollTop = div.scrollHeight;
      });
     },

  },

};

</script>

<style scoped>
.msgs {
  height: 400px;
  background-color: rgb(249, 251, 252);
  overflow-y: auto;
  padding: 5px;
}
.msgs li {
  margin-bottom: 15px;
}
.msgs small {
  font-size: 12px;
  color: #ccc;
  margin-top: 4px;
}
.msg-box {
  display: inline-block;
  padding: 10px;
  max-width: 48%;
}
.msg-box .title {
  font-size: 12px;
  margin-bottom: 4px;
}
.msg-box p {
  font-size: 14px;
  line-height: 1.5;
}
.msgs small {
  display: block;
}
/* 左边 */
.msg-l {
  text-align: left;
}
.msg-l .title {
  color: #ccc;
}
.msg-l p {
  color: #333;
}
.msg-l .msg-box {
  border-radius: 0 10px 10px 10px;
  background-color: rgb(234, 235, 241);
  position: relative;
  padding-left: 14px;
}
.msg-l .msg-box::before {
  content: "";
  width: 4px;
  height: calc(100% - 8px);
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgb(11, 163, 133);
}
/* 右边 */
.msg-r {
  text-align: right;
}
.msg-r .title {
  color: rgb(156, 226, 194);
}
.msg-r p {
  color: #fff;
}
.msg-r .msg-box {
  background-color: rgb(56, 195, 139);
  border-radius: 10px 0 10px 10px;
}

.send-msg {
  height: 120px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: relative;
}
.send-msg textarea {
  resize: none;
  width: 95%;
  height: 100px;
  /* padding: 10px 20px; */
  margin: 15px;
  border: 0;
  outline: none;
}
.el-icon-position {
  color: rgb(56, 195, 139);
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  right: 20px;
  bottom: 25px;
  cursor: pointer;
}
</style>